<template>
  <div class="layerMap_banksCriticals">
    <div>
      <h3>
        <div class="exampleMap">
          <Map ref="map" />
        </div>
      </h3>
      <h3>注意：使用堤围、险段，必须在该项目的Static文件下引入 kml文件夹，而该文件夹在 Gykj_map 目录下</h3>
      <h3>
        <Button type="primary" @click="addLayer('banksLayer')">添加堤围</Button>
        <Button type="primary" @click="removeLayer('banksLayer')">删除堤围</Button>
      </h3>
      <h3>
        <Button type="primary" @click="addLayer('criticalsLayer')">添加险段</Button>
        <Button type="primary" @click="removeLayer('criticalsLayer')">删除险段</Button>
      </h3>

      <code class="code">
        <div class="code-emptyLine"></div>

        <!-- script -->
        <div>
          <div class="code-tag">
            <<span>script</span>>
          </div>

          <!-- import 和 export default -->
          <div>
            <div class="code-indent2">
              <span class="code-orange">import</span>
              { Maps }
              <span class="code-orange">from</span>
              <span class="code-green">'src/base/Gykj_map'</span>
            </div>
            <div class="code-emptyLine"></div>
            <div class="code-indent2">
              <span class="code-orange">export default</span>
              {
            </div>
          </div>

          <!-- data -->
          <div>
            <div class="code-indent4">
              data () {
            </div>
            <div class="code-indent6">
              <span class="code-purpleRed">return</span> {
            </div>
            <div class="code-indent8">
              layers: {}
            </div>
            <div class="code-indent6">}</div>

            <div class="code-indent4">},</div>
          </div>

          <!-- methods -->
          <div>
            <div class="code-indent4">
              methods: {
            </div>

            <div class="code-indent6 comment">
              // 添加堤围
            </div>
            <div class="code-indent6">
              addBanksLayer () {
            </div>
            <div class="code-indent8">
              <span class="code-default">const</span>
              res =
              <span class="code-green">Maps</span>['banksLayer']()
            </div>

            <div class="code-indent8">
              <span class="code-orange">this</span>.$set(<span class="code-orange">this</span>.layers, 'banksLayer', res)
            </div>

            <div class="code-indent8">
              <span class="code-orange">this</span>.Map.addLayer(<span class="code-orange">this</span>.layers['banksLayer'].layer)
            </div>

            <div class="code-indent6">
              },
            </div>

            <div class="code-indent6 comment">
              // 删除堤围
            </div>
            <div class="code-indent6">
              removeBanksLayer () {
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.Map.removeLayer(<span class="code-orange">this</span>.layers['banksLayer'].layer)
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.$delete(<span class="code-orange">this</span>.layers, 'banksLayer')
            </div>

            <div class="code-indent6">},</div>

            <div class="code-indent6 comment">
              // 添加险段
            </div>
            <div class="code-indent6">
              addCriticalsLayer () {
            </div>
            <div class="code-indent8">
              <span class="code-default">const</span>
              res =
              <span class="code-green">Maps</span>['criticalsLayer']()
            </div>

            <div class="code-indent8">
              <span class="code-orange">this</span>.$set(<span class="code-orange">this</span>.layers, 'criticalsLayer', res)
            </div>

            <div class="code-indent8">
              <span class="code-orange">this</span>.Map.addLayer(<span class="code-orange">this</span>.layers['criticalsLayer'].layer)
            </div>

            <div class="code-indent6">
              },
            </div>

            <div class="code-indent6 comment">
              // 删除险段
            </div>
            <div class="code-indent6">
              removeCriticalsLayer () {
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.Map.removeLayer(<span class="code-orange">this</span>.layers['criticalsLayer'].layer)
            </div>
            <div class="code-indent8">
              <span class="code-orange">this</span>.$delete(<span class="code-orange">this</span>.layers, 'criticalsLayer')
            </div>

            <div class="code-indent6">}</div>

            <div class="code-indent4">}</div>
          </div>

          <!-- export default 的 } -->
          <div class="code-indent2">}</div>

          <!-- /script -->
          <div class="code-tag">
            </<span>script</span>>
          </div>
        </div>

      </code>
    </div>
  </div>
</template>

<script>
import { Components } from 'base/Gykj_map'

export default {
  components: {
    Map: Components.initMap
  },
  mounted () {
    setTimeout(() => {
      this.layers = this.$refs['map'].getLayers()
    }, 20)
  },
  data () {
    return {
      layers: {}
    }
  },
  methods: {
    addLayer (layerName) {
      this.$refs['map'].addLayer({ layerName })
    },
    removeLayer (layerName) {
      this.$refs['map'].removeLayer({ layerName })
    }
  }
}
</script>

<style lang="scss" scoped>
  .layerMap_banksCriticals {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
  }
</style>
